<style scoped>
/*通过设定或者继承父级以下变量修改样式
  --link-img-bg: var(--color-bg-0)
*/
.link{padding: 6px;}
.link .img{font-size: 2em;background: var(--link-img-bg, var(--color-bg-0));}
.link .title{line-height: 1;padding: 0 0.8em;text-align: left;}

.link.column{text-align: center;flex-direction: column;padding: .3em 0 0;}
.link.column .img{font-size: 3.2em;}
.link.column .title{text-align: center;padding: .4em 0;}
</style>
<template>
  <div class="link flex" :class="{column:column}">
    <icon-img class="img" v-if="thisData.head_img" :value="thisData.head_img" :badge="thisData.badge" :round="round" @click="click()"></icon-img>
    <div v-if="thisData.title" class="title max text-ellipsis" @click="click()">{{ thisData.title }}</div>
    <van-icon v-show="!column" name="arrow"/>
  </div>
</template>

<script>
import {to_string} from "@/js/s94_tool.js";
import IconImg from "@/components/widget/IconImg.vue";
import {href_handle} from "@/vue_plugin/router_auto.js";

/**
 * @prop {*}
 */
export default {
  components: {IconImg},
  _title_: '链接单元',
  _tip_: '跳转链接单元',
  _css_var_: {
    '--link-img-bg': 'var(--color-bg-0)',
    ...IconImg._css_var_,
  },
  _head_img_: '',
  _group_: '单元组件',
  props:{
    head_img: {
      type: [String, Number],
      default: 'https://picsum.photos/200',
      _label_: '头图',
      _tip_: '可以为图标，图标格式：图标包 图标类',
      _required_: true,
      _default_: "get($info,'head_img')",
      _input_type_: 'file_img',
    },
    title: {
      type: [String,Number],
      _label_: '标题',
      _tip_: '链接标题',
      _required_: true,
      _default_: "get($info,'title')",
    },
    column: {
      type: Boolean,
      _label_: '上下结构',
      _tip_: '是否为头图在上，标题在下的上下结构分布',
    },
    round: {
      type: Boolean,
      _label_: '圆角图标',
      _tip_: '',
    },
    href: {
      type: [String, Number],
      _label_: '跳转链接',
      _tip_: '点击后的跳转链接，为空点击后不跳转',
    },
    badge: {
      type: [String, Number],
      _label_: '角标内容',
      _tip_: '图标角标，为空显示图标角标',
    },

  },
  data(){
    return {}
  },
  methods:{
    click(){
      if (!this.thisData.href) return;
      href_handle(this.thisData.href);
    },
  },
  computed:{
    thisData(){
      return{
        head_img: to_string(this.head_img),
        title: to_string(this.title),
        href: to_string(this.href),
        badge: to_string(this.badge),
      }
    }
  },
  mounted(){
  }
}
</script>